<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.1.4.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var i = 2;
		$('#addFile').click(function(){
			$(this).parent().parent().before(
				'<tr class="file">' + 
					'<td>File ' + i + '</td>' +
					'<td><input type="file" name="file' + i + '" /></td>' +
				'</tr>' + 
				'<tr class="desc">' + 
					'<td>Desc ' + i + '</td>' +
					'<td>' + 
						'<input type="text" name="desc' + i + '" />&nbsp;' + 
						'<button id="delete'+ i + '">删除</button>' + 
					'</td>' +
				'</tr>'
			);
			i++;
			
			// 删除
			$('#delete' + (i - 1)).click(function(){
				var $tr = $(this).parent().parent();
				$tr.prev('tr').remove();
				$tr.remove();
				
				// 删掉之后对i重新进行排序
				$('.file').each(function(index){
					var n = index + 1;// index从0开始
					$(this).find('td:first').text('File ' + n);
					$(this).find('td:last input').attr('name', 'file' + n);
				});
				
				$('.desc').each(function(index){
					var n = index + 1;
					$(this).find('td:first').text('Desc ' + n);
					$(this).find('td:last input').attr('name', 'desc' + n);
				});
				
				i = i - 1;
			});
			
			return false;
		});
	});
</script>
<title>File Upload</title>
</head>
<body>
	<font style="color:red">${requestScope.message}</font>
	<form action="${pageContext.request.contextPath}/apiUpload"
		method="post" enctype="multipart/form-data">
		<table id="filTable" cellpadding="5" cellspacing="0">
			<tr class="file">
				<td>File 1</td>
				<td><input type="file" name="file1" /></td>
			</tr>
			<tr class="desc">
				<td>Desc 1</td>
				<td><input type="text" name="desc1" /></td>
			</tr>
			<tr>
				<td><input type="submit" value="Upload" /></td>
				<td><button id="addFile">新增一个附件</button></td>
			</tr>
		</table>
	</form>
</body>
</html>